<template>
  <div class="addHouse">
    <van-nav-bar left-arrow @click-left="onClickLeft" fixed title="发布房源" />
    <van-form @submit="onSubmit">
      <van-cell title="房源信息"  class="title"/>
      <van-field
        readonly
        clickable
        name="community"
        :value="community.value"
        label="小区名称"
        :placeholder="city"
        @click="community.showPicker = true"
      />
      <van-popup v-model="community.showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="community.columns"
          @confirm="communityConfirm"
          @cancel="community.showPicker = false"
        />
      </van-popup>
      <van-field
        v-model="price"
        name="price"
        label="租金"
        placeholder="请输入租金 ￥/月"
      />
      <van-field
        v-model="size"
        type="text"
        name="size"
        label="建筑面积"
        placeholder="请输入建筑面积/㎡"
      />
      <van-field
        readonly
        clickable
        name="roomtype"
        :value="roomtype.value"
        label="户型"
        placeholder="请选择户型"
        @click="roomtype.showPicker = true"
      />
      <van-popup v-model="roomtype.showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="roomtype.columns"
          @confirm="roomtypeConfirm"
          @cancel="roomtype.showPicker = false"
        />
      </van-popup>

      <van-field
        readonly
        clickable
        name="floor"
        :value="floor.value"
        label="所在楼层"
        placeholder="请选择楼层"
        @click="floor.showPicker = true"
      />
      <van-popup v-model="floor.showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="floor.columns"
          @confirm="floorConfirm"
          @cancel="floor.showPicker = false"
        />
      </van-popup>

      <van-field
        readonly
        clickable
        name="oriented"
        :value="oriented.value"
        label="朝向"
        placeholder="请选择朝向"
        @click="oriented.showPicker = true"
      />
      <van-popup v-model="oriented.showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="oriented.columns"
          @confirm="orientedConfirm"
          @cancel="oriented.showPicker = false"
        />
      </van-popup>

      <van-cell title="房屋标题" />

      <van-field
        v-model="title"
        type="text"
        name="title"
        placeholder="请输入建筑标题(例如：整租 小区门，2室 5000元)"
      />
      <van-cell title="房屋图像" />
      <van-field name="houseImg" label="文件上传">
        <template #input>
          <van-uploader v-model="houseImg" />
        </template>
      </van-field>

      <!-- <van-cell title="房屋配置" />
      <van-field name="supporting" label="复选框组">
        <template #input>
          <van-checkbox-group v-model="supporting" direction="horizontal">
            <van-checkbox name="1" shape="square">复选框 1</van-checkbox>
            <van-checkbox name="2" shape="square">复选框 2</van-checkbox>
          </van-checkbox-group>
        </template>
      </van-field> -->
      <div class="iconbox">
        <div class="icon">
          <van-icon name="like" size="16px"/>
          <p>衣柜</p>
        </div>
        <div class="icon">
          <van-icon name="like" size="16px" />
          <p>衣柜</p>
        </div>
        <div class="icon">
          <van-icon name="like" size="16px" />
          <p>衣柜</p>
        </div>
        <div class="icon">
          <van-icon name="like" size="16px" />
          <p>衣柜</p>
        </div>
        <div class="icon">
          <van-icon name="like" size="16px" />
          <p>衣柜</p>
        </div>
        <div class="icon">
          <van-icon name="like" size="16px" />
          <p>衣柜</p>
        </div>
        <div class="icon">
          <van-icon name="like" size="16px" />
          <p>衣柜</p>
        </div>
        <div class="icon">
          <van-icon name="like" size="16px" />
          <p>衣柜</p>
        </div>
        <div class="icon">
          <van-icon name="like" size="16px" />
          <p>衣柜</p>
        </div>
        <div class="icon">
          <van-icon name="like" size="16px" />
          <p>衣柜</p>
        </div>
      </div>

      <div class="description">
        <van-cell title="房屋描述" />
        <van-field
          v-model="description"
          type="text"
          name="description"
          placeholder="请输入房屋的描述信息"
        />
      </div>

      <div class="button">
        <div class="button1">
          <van-button block type="default" size="normal" plain>取消</van-button>
        </div>
        <div class="button2">
          <van-button block type="info" native-type="submit" size="normal" plain
            >确认</van-button
          >
        </div>
      </div>
    </van-form>
  </div>
</template>

<script>
import { publishHouse } from '@/api/house'
export default {
  name: 'addHouse-page',
  data () {
    return {
      price: '',
      city: '请输入小区',
      supporting: [],
      size: '',
      title: '',
      houseImg: [{ url: 'https://img01.yzcdn.cn/vant/leaf.jpg' }],
      description: '',
      community: {
        value: '',
        columns: ['上海', '广州', '深圳', '北京', '杭州'],
        showPicker: false
      },
      roomtype: {
        value: '',
        columns: ['一室一厅', '一室两厅', '两室一厅', '两室两厅', '三室两厅'],
        showPicker: false
      },
      floor: {
        value: '',
        columns: ['高层', '中层', '底层', '地下室'],
        showPicker: false
      },
      oriented: {
        value: '',
        columns: ['东', '西', '南', '北'],
        showPicker: false
      }
    }
  },
  methods: {
    async onSubmit (values) {
      console.log(values)
      values.houseImg = values.houseImg[0].url
      console.log(values)
      const res = await publishHouse(values)
      console.log(res)
    },
    onClickLeft () {
      this.$router.back()
    },
    communityConfirm (value) {
      this.community.value = value
      this.community.showPicker = false
      this.$router.push(`searchCommunity/${value}`)
    },
    roomtypeConfirm (value) {
      this.roomtype.value = value
      this.roomtype.showPicker = false
    },
    floorConfirm (value) {
      this.floor.value = value
      this.floor.showPicker = false
    },
    orientedConfirm (value) {
      this.oriented.value = value
      this.oriented.showPicker = false
    }
  },
  created () {
    this.city = this.$route.query.name
  }
}
</script>

<style lang="less" scoped>
.addHouse {
  position: relative;
  margin-top: 50px;
  // margin-bottom: 50px;
  .title {
    font-size: 16px;
    color: pink;
  }

  .iconbox {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    .icon {
      width: 70px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
  .description {
    margin-top: 15px;
    width: 100%;
    height: 200px;
  }

  .button {
    position: absolute;
    bottom: -50px;

    display: flex;
    justify-content: space-around;
    width: 100%;
    .button1 {
      width: 150px;
    }
     .button2 {
      width: 150px;
    }
  }
}
</style>
